<!-- Modal -->
<div class="modal fade" id="modal-addlayer" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 style="font-weight: bold" v-t="'mapcontrols.add_layer_control.header'" class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label v-t="'mapcontrols.add_layer_control.select_projection'" for="proiezione-layer"></label>
          <select class="form-control" id="proiezione-layer" v-model="layer.crs">
            <option v-for="option in options" :value="option">{{option}}</option>
          </select>
        </div>
        <p v-t="'mapcontrols.add_layer_control.select_color'" style="font-weight: 700;"></p>
        <chrome-picker v-model="layer.color" @change-color="onChangeColor" style="width:90%;margin:auto"></chrome-picker>
        <bar-loader :loading="loading"></bar-loader>
        <form id="addcustomlayer">
          <input type="file" title=" " @change="onAddLayer($event)" accept=".kml,.geojson, .KML, .GEOJSON, .zip">
          <h4 v-t="'mapcontrols.add_layer_control.drag_layer'"></h4>
          <h4 v-if="layer.name">{{ layer.name }}</h4>
          <div>
            <i :class="g3wtemplate.getFontClass('cloud-upload')" class="fa-5x" aria-hidden="true"></i>
          </div>
          <p style="font-weight: bold">[.gml, .geojson, .kml, .zip(shapefile)]</p>
        </form>
      </div>
      <div style="font-weight: bold; font-size: 1.2em; background-color: orange; padding: 10px; text-align: center" v-if="error" v-t="error_message"></div>
      <div class="modal-footer">
        <button v-t="'add'" type="button" class="btn btn-success pull-left" @click="addLayer" :disabled="!layer.name"></button>
        <button v-t="'close'" type="button" class="btn btn-default" data-dismiss="modal" @click="clearLayer"></button>
      </div>
    </div>
  </div>
</div>
